<!-- 积分专区分类 -->
<template>
	<view class="container">
		<view class="cateBox hot">
			<view class="title">热门分类</view>
			<view class="listBox">
				<text :class="cate == 1&&active == index?'active':''" class="listItem" v-for="(item,index) in top_cate" :key="index" @tap="clickCate(1,index,item)">{{item.cate_name}}</text>
			</view>
		</view>
		<view class="cateBox">
			<view class="title">全部分类</view>
			<view class="listBox">
				<text :class="cate == 2&&active == index?'active':''" class="listItem" v-for="(item,index) in cate_list" :key="index" @tap="clickCate(2,index,item)">{{item.cate_name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		signShopSearchData
	} from "@/api/mall.js"
	export default {
		components: {
			
		},
		data() {
			return {
				cate_list: [],
				top_cate: [],
				active: null,
				cate: 0,
			}
		},
		onLoad(option) {
			this.loadData()
		},
		methods: {
			loadData() {
				signShopSearchData({
					type: 1
				}).then(res => {
					this.cate_list = res.data.all
					this.top_cate = res.data.hot
				})
			},
			clickCate(cate,index,item) {
				this.cate = cate
				this.active = index
				uni.navigateTo({
					url:"./IntegralList?cate=" + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container{
		.cateBox{
			padding: 30rpx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				color: #666666;
				margin-bottom: 40rpx;
			}
			.listBox{
				width: 710rpx;
				margin-left: -10rpx;
				display: flex;
				flex-wrap: wrap;
				.listItem{
					margin: 0 10rpx 20rpx;
					min-width: 154rpx;
					padding: 0 10rpx;
					height: 76rpx;
					border: 2rpx solid #EEEEEE;
					border-radius: 8rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #343434;
					text-align: center;
					line-height: 72rpx;
					box-sizing: border-box;
				}
				.active{
					border: 2rpx solid #72663C;
					color: #72663C;
				}
			}
		}
		.hot{
			border-top: 10rpx solid #f8f8f8;
			.listBox{
				.listItem{
					background: #eee;
					border: none;
					line-height: 76rpx;
				}
				.active{
					border: none;
					background: #F2E9C8;
					color: #72663C;
				}
			}
		}
	}
</style>
